<template>
	<view class="container">
		<!-- 入住和离店日期 -->
		<view class="date-section">
			<text class="title">周三入住</text>
			<view class="date-info">
				<text>{{ checkInDate }}</text>
				<text>-</text>
				<text>{{ totalNights }} 晚</text>
				<text>-</text>
				<text>{{ checkOutDate }}</text>
			</view>
		</view>

		<!-- 预订信息表单 -->
		<u-form ref="formRef" :model="formData" label-position="left" label-width="150px">
			<u-cell-group>
				<u-cell title="房间类型" :value="roomType"></u-cell>
				<u-cell title="入住人数" :value="guests"></u-cell>
				<u-cell title="备注" :value="notes" @click="showNotesPopup = true"></u-cell>
				<u-cell title="入住姓名" :value="checkInName"></u-cell>
				<u-cell title="联系电话" :value="contactPhone"></u-cell>
				<u-cell title="最晚入住" :value="latestCheckIn"></u-cell>
				<u-cell title="订单编号" :value="orderNumber">
					<view slot="right" @click="copyOrderNumber">
						<text>复制</text>
					</view>
				</u-cell>
			</u-cell-group>
		</u-form>

		<!-- 备注弹窗 -->
		<u-popup v-model="showNotesPopup" mode="bottom">
			<view class="popup-content">
				<u-input v-model="notes" placeholder="请输入备注" />
				<view class="actions">
					<button @click="saveNotes">保存</button>
					<button @click="cancelNotes">取消</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 默认最小日期为今天
				minDate: new Date().getTime(),
				// 默认最大日期为一年后
				maxDate: new Date(new Date().setFullYear(new Date().getFullYear() + 1)).getTime(),
				// 控制日期选择器的显示状态
				showPicker: false,
				// 当前选择的类型（入住或离店）
				pickerType: '',
				// 入住和离店日期
				checkInDate: '2025.02.10',
				checkOutDate: '2025.02.12',
				// 总晚数
				totalNights: 2,
				// 预订信息
				roomType: '1间客房',
				guests: '1位成人',
				notes: '需要Type C 充电线',
				checkInName: '李姗',
				contactPhone: '联系电话',
				latestCheckIn: '2025-02-05 10:30:16',
				orderNumber: '1001005909876',
				// 备注弹窗状态
				showNotesPopup: false,
			};
		},
		methods: {
			// 打开日期选择器
			openPicker(type) {
				this.pickerType = type;
				this.showPicker = true;
			},
			// 确认选择日期
			onConfirm(e) {
				const selectedDate = this.formatDate(e.value);

				if (this.pickerType === 'checkIn') {
					this.checkInDate = selectedDate;

					// 如果离店日期早于入住日期，清空离店日期
					if (this.checkOutDate && new Date(this.checkOutDate) <= new Date(selectedDate)) {
						this.checkOutDate = '';
					}
				} else if (this.pickerType === 'checkOut') {
					this.checkOutDate = selectedDate;
				}

				this.showPicker = false;
			},
			// 格式化日期为 YYYY-MM-DD
			formatDate(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			// 复制订单编号
			copyOrderNumber() {
				uni.setClipboardData({
					data: this.orderNumber,
					success: () => {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
						});
					},
				});
			},
			// 显示备注弹窗
			showNotesPopup: function() {
				this.showNotesPopup = true;
			},
			// 保存备注
			saveNotes() {
				this.showNotesPopup = false;
			},
			// 取消备注
			cancelNotes() {
				this.showNotesPopup = false;
			},
		},
	};
</script>

<style scoped>
	.container {
		padding: 20px;
	}

	.date-section {
		margin-bottom: 20px;
	}

	.title {
		font-size: 16px;
		color: #333;
	}

	.date-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 10px;
	}

	.booking-info {
		margin-top: 20px;
	}

	.popup-content {
		padding: 20px;
	}

	.actions {
		display: flex;
		justify-content: flex-end;
		margin-top: 20px;
	}

	.actions button {
		margin-left: 10px;
	}
</style>